<template>
  <div>
    <Row>
      <Col span="24">
        <div style="height: 100%; overflow-y: scroll; overflow-x: hidden">
          <BasicTable
            @register="registerTable"
            :rowSelection="{
              type: 'checkbox',
              onChange: handlePerChange,
            }"
          />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { GetResourceList } from '/@/api/demo/dict';
  import { getPerSettingColumns } from './tableData';

  // 定义 props
  const props = defineProps({
    viewUserPerData: {
      type: Array,
      required: true,
    },
  });

  // 监听 props 的变化
  watch(
    () => props.viewUserPerData,
    () => {
      setSelectedRowKeys(props.viewUserPerData);
    },
  );

  const { t } = useI18n();

  const permissionData = ref([]);
  // 权限选择数据
  const permissionSelectData = ref([]);

  // 使用 defineExpose 暴露子组件的数据和方法
  defineExpose({
    permissionData,
    permissionSelectData,
  });

  const handlePerChange = (checkedKeys: any) => {
    permissionSelectData.value = checkedKeys;
  };

  // 表格初始化
  const [registerTable, { setSelectedRowKeys }] = useTable({
    columns: getPerSettingColumns(),
    api: GetResourceList,
    searchInfo: {
      TypeName: '目录权限',
      Universal: '',
    },
    bordered: true,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: false }, // 表格设置工具配置
    // pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    rowKey: 'id',
    pagination: false,
    maxHeight: 500,
    // canResize: false,
    striped: false,
  });
</script>
